Switch

A common component for the react native switch component

Properties

Name	Type	Default Value	Required	Description
accessible	boolean		No	When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
accessibilityActions	readonly Readonly<{ name: string; label?: string; }>[]		No	Provides an array of custom actions available for accessibility.
accessibilityLabel	string		No	Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
aria-label	string		No	Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-native/issues/34424
accessibilityRole	AccessibilityRole		No	Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.
accessibilityState	AccessibilityState		No	Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on.
aria-busy	boolean		No	alias for accessibilityState see https://reactnative.dev/docs/accessibility#accessibilitystate
aria-checked	boolean | "mixed"		No
aria-disabled	boolean		No
aria-expanded	boolean		No
aria-selected	boolean		No
accessibilityHint	string		No	An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
accessibilityValue	AccessibilityValue		No	Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
aria-valuemax	number		No
aria-valuemin	number		No
aria-valuenow	number		No
aria-valuetext	string		No
onAccessibilityAction	(event: AccessibilityActionEvent) => void		No	When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action.
importantForAccessibility	"auto" | "yes" | "no" | "no-hide-descendants"		No	[Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
aria-hidden	boolean		No	A value indicating whether the accessibility elements contained within this accessibility element are hidden.
aria-modal	boolean		No
role	Role		No	Indicates to accessibility services to treat UI component like a specific role.
accessibilityLabelledBy	string | string[]		No	Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, the text is read aloud. The value should should match the nativeID of the related element. @platform android
aria-labelledby	string		No	Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, the text is read aloud. The value should should match the nativeID of the related element. @platform android
accessibilityLiveRegion	"none" | "polite" | "assertive"		No	Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. @platform android See https://reactnative.dev/docs/view#accessibilityliveregion
aria-live	"polite" | "assertive" | "off"		No	Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. @platform android See https://reactnative.dev/docs/view#accessibilityliveregion
accessibilityElementsHidden	boolean		No	A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden to the screen reader. @platform ios
accessibilityViewIsModal	boolean		No	A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. @platform ios
onAccessibilityEscape	() => void		No	When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers). @platform ios
onAccessibilityTap	() => void		No	When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture. @platform ios
onMagicTap	() => void		No	When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform ios
accessibilityIgnoresInvertColors	boolean		No	https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios
accessibilityLanguage	string		No	By using the accessibilityLanguage property, the screen reader will understand which language to use while reading the element's label, value and hint. The provided string value must follow the BCP 47 specification (https://www.rfc-editor.org/info/bcp47). https://reactnative.dev/docs/accessibility#accessibilitylanguage-ios @platform ios
onPress	(value: boolean) => void		Yes	callback called on value change of the switch
on	boolean		No	optional value of switch, updated with onPress
testID	string		No	optional testID of switch
a11yHint	string		No	optional accessibilityHint

Example

How to use the Switch component

<Switch onPress={() => { console.log('update on press') }} on={false} />

Source Code

Full code for the Switch component

import React, { FC } from 'react'
import { AccessibilityProps, Switch as RNSwitch } from 'react-native'

import styled from 'styled-components'

import { a11yHintProp } from 'utils/accessibility'
import { useTheme } from 'utils/hooks'

const StyledRNSwitch = styled(RNSwitch)`
  shadow-opacity: 0.3;
  shadow-radius: 1px;
  shadow-offset: 0px 0.5px;
  min-width: 51px;
`
/**
 * Signifies props passed into {@link Switch}
 */
export type SwitchProps = AccessibilityProps & {
  /** callback called on value change of the switch */
  onPress: (value: boolean) => void
  /** optional value of switch, updated with onPress */
  on?: boolean
  /** optional testID of switch */
  testID?: string
  /** optional accessibilityHint */
  a11yHint?: string
}

/**A common component for the react native switch component*/
const Switch: FC<SwitchProps> = (props) => {
  const { onPress, on, testID, a11yHint } = props
  const theme = useTheme()
  return (
    <StyledRNSwitch
      trackColor={{ false: theme.colors.control.switchOffTrack, true: theme.colors.control.switchOnTrack }}
      thumbColor={theme.colors.control.switchOnThumb}
      onValueChange={onPress}
      value={!!on}
      testID={testID}
      {...a11yHintProp(a11yHint || '')}
    />
  )
}

export default Switch

Accessibility